<style>
    .modal-content{
        width: 400px;
        border-radius: 10px;
        margin-top:calc(50% - 100px)
    }
    .row{margin-bottom: 20px;}
    .re-time input[type='text']{width: 135px;height: 35px}
    .re-time select{height: 35px;width: 80px;margin-right: 5px;}
    .callPhone{position: relative}
    .callPhone .call-type{display: none;position: absolute;width: 320px;height: 30px;padding: 10px;left:-100px;top:16px;background: transparent;z-index:99}
    .callPhone:hover .call-type{display: block}
    @media (min-width: 768px){
        #myModal1 .modal-dialog .modal-content{  width: 530px;  margin: 30px auto;}
    }
    table tbody tr:nth-child(odd){background: #eee}
    table tbody tr:nth-child(even){background: #e0e8d1}
    .layui-layer-page .layui-layer-content{padding: 10px 20px;line-height:30px}
</style>
<section class="content">
    <div class="search">
        <form role="form">
            <div class="row">
                <div class="col-xs-3 col-md-4">
                    <div class="form-group">
                        <div class="date-box">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <input type="text" ng-model="orderModel.startDate"
                                       class="form-control pull-right date-picker timerange" placeholder="开始时间" >
                                <span class="line">-</span>
                                <input type="text" ng-model="orderModel.endDate"
                                       class="form-control pull-right date-picker timerange" placeholder="结束时间"  >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-1 col-md-2">
                    <div class="form-group" >
                        <input type="text" class="form-control" placeholder="用户姓名/电话" ng-model="orderModel.userName">
                    </div>
                </div>
                <div class="col-xs-1 col-md-2">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="订单名称" ng-model="orderModel.orderName">
                    </div>
                </div>
                <div class="col-xs-1">
                    <input type="button" class="btn-primary btn" value="查询" ng-click="getOrderList(1)">
                </div>
                <div class="col-xs-1">
                    <input type="button" class="btn-default btn" value="导出" ng-click="exportExecl()">
                </div>

            </div>
        </form>
    </div>
    <div class="table-box">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>订单号</th>
                <th>下单时间</th>
                <th>姓名</th>
                <th>电话</th>
                <th>订单类型</th>
                <th>订单属性</th>
                <th>订单金额</th>
                <th>支付金额</th>
                <th>支付状态</th>
                <!--<th>余额</th>-->
                <th>操作</th>

            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="n in orderlist">
                <td>{{n.orderNo}}</td>
                <td>{{n.orderTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>
                <td>{{n.userName}}</td>
                <td>{{n.cellPhone}}</td>

                <td>{{n.orderName}}</td>
                <td>
                    <span ng-if="n.orderType=='suite'">套餐</span>
                    <span ng-if="n.orderType=='reservationPhone'">电话预约</span>
                    <span ng-if="n.orderType=='expertConsultation'">预约名医</span>
                </td>

                <td>{{n.payPrice | currency:"￥"}}</td>
                <td>
                    <span ng-if="n.earnestMoney || n.finalPayment">
                         定金：{{(n.earnestMoney | currency:"￥" )|| '未支付'}}<br />
                        尾款：{{(n.finalPayment| currency:"￥" )|| '未支付'}}
                    </span>
                    <span  ng-if="!n.earnestMoney && !n.finalPayment">
                        {{n.payPrice | currency:"￥"}}
                    </span>

                </td>
                <td>
                    <span ng-if="n.orderStatus=='0'">未支付</span>
                    <span ng-if="n.orderStatus=='1'">已完成支付</span>
                    <span ng-if="n.orderStatus=='2'">退款中</span>
                    <span ng-if="n.orderStatus=='3'">已退款</span>
                    <span ng-if="n.orderStatus=='4'">已取消</span>
                    <span ng-if="n.orderStatus=='5'">定金支付成功</span>
                    <span ng-if="n.orderStatus=='6'">定金已确认(尾款待支付)</span>
                </td>
                <td>
                    <div ng-if="n.orderType=='suite'">
                        <div  ng-if="n.orderStatus=='5' || n.orderStatus=='6'">

                            <!--<a  href="javascript:;" data-toggle="modal" data-target="#myModal" data-id="{{n.orderId}}" ng-click="refund($event)">退款</a> |-->
                            <span>退款</span> |
                            <a href="javascript:;" ng-click="finalSet(n.orderId);" data-toggle="modal" data-target="#myModal">尾款设置</a> |
                            <a href="javascript:;" ng-if="n.finalPaymentFlag=='0'" data-id="{{n.orderId}}" data-name="{{n.userName}}" ng-click="finalPayment($event)">尾款支付</a>
                            <span  ng-if="n.finalPaymentFlag!='0'">尾款支付</span>|
                            <a   href="javascript:;"  data-detail="{{n}}" class="callPhone">通话<span class="caret"></span>
                                <div class="call-type">
                                    <button class="btn btn-primary btn-sm" ng-click="callDouble($event)">双向通话</button>
                                    <button class="btn btn-primary btn-sm" ng-click="conversationList($event)">通话记录</button>
                                </div>
                            </a>
                        </div>
                        <div  ng-if="n.orderStatus=='1'">
                            <!--<a  href="javascript:;" data-toggle="modal" data-target="#myModal" data-id="{{n.orderId}}" ng-click="refund($event)">退款</a> |-->
                            <span>尾款支付</span>|

                            <a   href="javascript:;"  data-detail="{{n}}" class="callPhone">通话<span class="caret"></span>
                                <div class="call-type">
                                    <button class="btn btn-primary btn-sm" ng-click="callDouble($event)">双向通话</button>
                                    <button class="btn btn-primary btn-sm" ng-click="conversationList($event)">通话记录</button>
                                </div>
                            </a>
                        </div>
                        <div ng-if="n.orderStatus=='0' || n.orderStatus=='2' || n.orderStatus=='3' || n.orderStatus=='4'" >
                            <span>退款</span> |
                            <span>尾款支付</span>|

                        </div>
                    </div>
                    <div ng-if="n.orderType !='suite'">
                        <div  ng-if="n.orderStatus=='5' || n.orderStatus=='6'">
                            <span>退款</span> |
                            <!--<a  href="javascript:;" data-toggle="modal" data-target="#myModal" data-id="{{n.orderId}}" ng-click="refund($event)">退款</a> |-->
                            <a href="javascript:;" data-id="{{n.orderId}}" ng-click="finalPayment($event)">尾款支付</a>|
                        </div>
                        <div  ng-if="n.orderStatus=='1'">
                            <span>退款</span> |
                            <!--<a  href="javascript:;" data-toggle="modal" data-target="#myModal" data-id="{{n.orderId}}" ng-click="refund($event)">退款</a> |-->
                            <span>尾款支付</span>
                        </div>
                        <div ng-if="n.orderStatus=='0' || n.orderStatus=='2' || n.orderStatus=='3' || n.orderStatus=='4'" >
                            <span>退款</span> |
                            <span>尾款支付</span>
                        </div>
                    </div>
                </td>
            </tr>

            <tr ng-if="orderlist.length <= 0">
                <td colspan="10" class="text-center">暂无数据！</td>
            </tr>
            </tbody>
        </table>
        <div class="page-function text-center" ng-if="orderlist.length > 0">
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        尾款设置
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <span>请输入尾款金额：</span><br>
                        <input type="text" ng-model="finalPaymentSet" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" onblur="value=value.replace(/[^\w\.\/]/ig,'')" > 元
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消
                    </button>
                    <button type="button" class="btn btn-primary" ng-click="commitSet()">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel1">预约</h4>
                </div>
                <div class="modal-body re-time">
                    <div class="row">
                        <div class="col-xs-5">确定时间：</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-4"><input type="text" class="date-picker" name="date" value="{{orderTime}}"></div>
                        <div class="col-xs-3">
                            <select name="hour" class="hour">
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                            </select>时
                        </div>
                        <div class="col-xs-3">
                            <select name="sec" class="sec">
                                <option value="00">00</option>
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="40">40</option>
                                <option value="50">50</option>
                            </select>分</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            设置通话时长：
                            <select name="callSec">
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="40">40</option>
                                <option value="50">50</option>
                                <option value="60">60</option>
                            </select>分钟
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" ng-click="commitReTime()">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</section>
